<style>
    .md-container {
        display: flex;
        flex-direction: column;
        padding: 1rem 5rem 4rem;
    }
    #addPropertyForm .layui-form-label {
        padding: 9px 0;
    }
    #addPropertyForm .property-input-row {
        display: grid;
        grid-template-columns: 2.5fr 1.5fr;
        grid-gap: 10px;
    }
    #addPropertyForm .column-input-row {
        display: grid;
        grid-template-columns: 1.5fr 1.5fr 1fr;
        grid-gap: 10px;
    }
</style>
<div class="md-container" xmlns:th="https://www.thymeleaf.org/">
    <div class="layui-row layui-col-space20">
        <div class="layui-col-xs5 layui-col-sm5 layui-col-md5">
            <table class="layui-table" style="margin: 0;">
                <tbody>
                <tr>
                    <td>实体类名</td>
                    <td th:text="${model.modelName}"></td>
                </tr>
                <tr>
                    <td>表名</td>
                    <td th:text="${model.tableName}"></td>
                </tr>
                <tr>
                    <td>创建人</td>
                    <td th:text="${model.createUser}"></td>
                </tr>
                <tr>
                    <td>创建时间</td>
                    <td th:text="${#dates.format(model.createTime, 'yyyy年MM月dd日 HH:mm')}"></td>
                </tr>
                <tr>
                    <td>修改时间</td>
                    <td th:text="${#dates.format(model.modifyTime, 'yyyy年MM月dd日 HH:mm')}"></td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="layui-col-xs7 layui-col-sm7 layui-col-md7">
            <div class="layui-card" style="padding: 5px 20px 5px 5px;">
                <div style="font-size: 1.15rem; margin: 10px 20px 15px;">新增属性</div>
                <form class="layui-form" id="addPropertyForm" lay-filter="add-property-form">
                    <input name="modelId" class="layui-hide" th:value="${model.id}">

                    <div class="layui-form-item">
                        <label class="layui-form-label red-star">属性</label>
                        <div class="layui-input-block">
                            <div class="property-input-row">
                                <input name="propertyName"
                                       lay-verify="required"
                                       lay-reqText="属性名是必填项"
                                       lay-verType="tips"
                                       placeholder="填写属性名"
                                       class="layui-input">
                                <select id="proType"
                                        name="propertyTypeId"
                                        lay-verType="tips"
                                        lay-verText="字段类型为必选项"
                                        lay-verify="required">
                                    <option value="">选择属性类型</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label red-star">字段</label>
                        <div class="layui-input-block">
                            <div class="column-input-row">
                                <input name="columnName"
                                       lay-verify="columnName"
                                       autocomplete="off"
                                       readonly
                                       disabled
                                       class="layui-input layui-disabled">
                                <select id="colType"
                                        name="columnTypeId"
                                        lay-verType="tips"
                                        lay-verText="字段类型为必选项"
                                        lay-verify="required">
                                    <option value="">选择字段类型</option>
                                </select>
                                <input class="layui-input"
                                       placeholder="输入字段长度"
                                       name="columnLength"
                                       lay-verify="mynumber"
                                       lay-verType="tips"
                                       type="number">
                            </div>
                        </div>
                        <!--                        <div class="layui-inline">-->
                        <!--                            <div class="layui-input-inline" style="width:130px;">-->
                        <!--                                -->
                        <!--                            </div>-->
                        <!--                        </div>-->
                        <!--                        <div class="layui-inline">-->
                        <!--                            <div class="layui-input-inline">-->
                        <!--                                -->
                        <!--                            </div>-->
                        <!--                        </div>-->
                        <!--                        <div class="layui-inline">-->
                        <!--                            <div class="layui-input-inline" style="width: 120px;">-->
                        <!--                                -->
                        <!--                            </div>-->
                        <!--                        </div>-->
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label red-star">属性说明</label>
                        <div class="layui-input-block">
                            <input name="remark"
                                   lay-verify="required"
                                   lay-reqText="属性说明不允许为空"
                                   lay-verType="tips"
                                   placeholder="填写属性说明"
                                   class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="submit"
                                    class="layui-btn"
                                    lay-submit
                                    lay-filter="add-property-form-submit">提交保存</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="layui-row" style="margin-top: 15px;">
        <div class="layui-card">
            <div class="layui-card-header">模型明细列表</div>
            <div class="layui-card-body">
                <table id="model_detail_table" lay-filter="model_detail"></table>
            </div>
        </div>
    </div>

</div>


<script type="text/html" id="optColumn">
    {{# if(d.inherentFlag !== 1) { }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{# } }}
</script>
<script type="text/javascript" src="/static/js/model_detail.js"></script>